<template>
  <div class="salary-distribution-chart">
    <h2 class="chart-title">薪酬分布（人民币）</h2>
    <div ref="chartContainer" class="chart-container"></div>
    
    <div class="chart-info">
      <div class="user-position">
        <div class="position-mark red"></div>
        <span class="position-text">您的薪酬位置：{{ userPercentile }}百分位</span>
      </div>
      <el-tag type="info" class="salary-tag">
        您的薪酬：<span class="value">{{ userSalary.toFixed(1) }}万人民币</span>
      </el-tag>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  userSalary: {
    type: Number,
    required: true,
    default: 42.3
  }
})

const chartContainer = ref(null)
let chartInstance = null
const userPercentile = ref('85')

// 图表配置
const chartOption = ref({
  title: {
    text: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      return `${params[0].name}<br/>数值：${params[0].value}万`
    }
  },
  grid: {
    left: '3%',
    right: '15%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    name: '薪资范围（万）',
    nameLocation: 'middle',
    nameGap: 30,
    min: 15,
    max: 55,
    axisLabel: {
      formatter: '{value}万'
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    name: '薪酬分布',
    nameRotate: 0,
    nameTextStyle: {
      fontSize: 14,
      padding: [0, 0, 0, 10]
    },
    axisLine: {
      show: true
    }
  },
  series: [
    {
      name: '薪酬分布',
      type: 'scatter',
      symbolSize: 10,
      itemStyle: {
        color: '#5470c6'
      },
      data: [
        [18.5, 8.2],
        [19.2, 7.5],
        [20.0, 10.0],
        [20.8, 9.1],
        [21.6, 11.2],
        [22.3, 10.5],
        [23.0, 12.7],
        [23.8, 11.8],
        [24.6, 14.3],
        [25.0, 15.0],
        [25.9, 13.7],
        [26.4, 14.5],
        [27.1, 16.3],
        [28.0, 15.2],
        [28.7, 17.8],
        [29.4, 16.9],
        [30.0, 20.0],
        [30.8, 18.5],
        [31.2, 19.3],
        [32.1, 21.7],
        [33.0, 20.5],
        [33.8, 22.6],
        [34.5, 21.4],
        [35.0, 25.0],
        [35.6, 23.1],
        [36.4, 25.2],
        [37.1, 23.9],
        [37.9, 26.8],
        [38.5, 25.7],
        [39.0, 28.6],
        [40.0, 30.0],
        [41.2, 27.8],
        [42.1, 29.3],
        [43.0, 31.5],
        [44.2, 30.1],
        [45.0, 35.0],
        [46.0, 32.7],
        [47.2, 34.3],
        [48.1, 36.2],
        [49.0, 34.9]
      ]
    },
    {
      name: '您的薪酬',
      type: 'scatter',
      symbolSize: 20,
      itemStyle: {
        color: '#ee6666'
      },
      markLine: {
        symbol: 'none',
        label: {
          show: true,
          position: 'end',
          formatter: '您的薪酬',
          color: '#ee6666'
        },
        lineStyle: {
          color: '#ee6666',
          type: 'dashed',
          width: 2
        },
        data: [
          {
            xAxis: props.userSalary,
            lineStyle: {
              type: 'dashed'
            }
          }
        ]
      },
      data: [[props.userSalary, 32]]
    },
    {
      name: '平均值',
      type: 'scatter',
      symbolSize: 14,
      itemStyle: {
        color: '#91cc75'
      },
      markLine: {
        symbol: 'none',
        label: {
          show: true,
          position: 'end',
          formatter: '平均值',
          color: '#91cc75'
        },
        lineStyle: {
          color: '#91cc75',
          type: 'dashed',
          width: 1
        },
        data: [
          {
            xAxis: 32.8,
            lineStyle: {
              type: 'dashed'
            }
          }
        ]
      },
      data: [[32.8, 20]]
    },
    {
      name: '中位数',
      type: 'scatter',
      symbolSize: 14,
      itemStyle: {
        color: '#fac858'
      },
      markLine: {
        symbol: 'none',
        label: {
          show: true,
          position: 'end',
          formatter: '中位数',
          color: '#fac858'
        },
        lineStyle: {
          color: '#fac858',
          type: 'dashed',
          width: 1
        },
        data: [
          {
            xAxis: 30.5,
            lineStyle: {
              type: 'dashed'
            }
          }
        ]
      },
      data: [[30.5, 18]]
    }
  ],
  legend: {
    data: ['薪酬分布', '您的薪酬', '平均值', '中位数'],
    right: '5%',
    top: 'center',
    orient: 'vertical'
  }
})

// 初始化图表
const initChart = () => {
  if (!chartContainer.value) return
  chartInstance = echarts.init(chartContainer.value)
  chartInstance.setOption(chartOption.value)
}

// 计算用户百分位
const calculateUserPercentile = () => {
  const allSalaries = chartOption.value.series[0].data.map(item => item[0]).sort((a, b) => a - b)
  const userSalary = props.userSalary
  const lowerCount = allSalaries.filter(s => s < userSalary).length
  const percentile = Math.round((lowerCount / allSalaries.length) * 100)
  userPercentile.value = isNaN(percentile) ? '85' : percentile.toString()
}

onMounted(() => {
  initChart()
  calculateUserPercentile()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
  window.removeEventListener('resize', handleResize)
})

const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}
</script>

<style scoped>
.salary-distribution-chart {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-top: 20px;
}

.chart-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.chart-container {
  height: 400px;
  width: 100%;
}

.chart-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding: 10px;
  border-top: 1px solid #eee;
}

.user-position {
  display: flex;
  align-items: center;
}

.position-mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 8px;
}

.position-mark.red {
  background-color: #ee6666;
}

.position-text {
  font-size: 14px;
  color: #606266;
}

.salary-tag {
  font-size: 15px;
  padding: 8px 15px;
}

.salary-tag .value {
  font-weight: bold;
  color: #ee6666;
  margin-left: 5px;
}
</style>